<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<haed>
    <th:block th:include="common :: header" />
    <th:block th:include="common :: ztree" />
</haed>
<body>
    <style>
        .dm-form{
            padding: 30px 40px 30px 100px;
            width: 600px;
        }
    </style>
    <form class="layui-form dm-form" id="form_add" action="/system/menu/add">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单类型：</label>
            <div class="layui-input-block">
                <input type="radio" name="menuType" value="1" title="目录" checked>
                <input type="radio" name="menuType" value="2" title="菜单">
                <input type="radio" name="menuType" value="3" title="按钮">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上级菜单：</label>
            <div class="layui-input-block">
                <input id="treeId" name="parentId" type="hidden" th:value="${menu.menuId}" />
                <input type="text" id="treeName" class="layui-input" lay-verify="required" placeholder="上级菜单" th:value="${menu.menuName}" readonly/>
                <i class="layui-icon layui-icon-search" style="position: absolute;top:12px;right: 8px;"></i>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称：</label>
            <div class="layui-input-block">
                <input type="text" name="menuName" placeholder="菜单名称" lay-verify="required" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单图标：</label>
            <div class="layui-input-block">
                <input type="text" name="icon" id="icon" class="layui-input" placeholder="菜单名称" readonly>
                <i class="layui-icon layui-icon-search" style="position: absolute;top:12px;right: 8px;"></i>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单URL：</label>
            <div class="layui-input-block">
                <input type="text" name="url" id="url" class="layui-input" placeholder="/xxx/xxx/xxx">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单权限：</label>
            <div class="layui-input-block">
                <input type="text" name="perms" id="perms" class="layui-input" placeholder="xxx:xxx:xxx">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示排序：</label>
            <div class="layui-input-block">
                <input type="text" name="orderNum" id="orderNum" lay-verify="required|number" class="layui-input" placeholder="显示排序（数字）">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否显示：</label>
            <div class="layui-input-block">
                <input type="checkbox" name="visible" checked lay-skin="switch">
            </div>
        </div>
        <button id="btn_sumbit" class="layui-btn hidden" lay-submit lay-filter="form">立即提交</button>
    </form>

    <script th:src="@{/js/domor/domor.js}"></script>
    <script>
        var form = layui.form;
        form.render();

        form.on('radio', function(data){
            var menuType = data.value;
            if (menuType == 1) {
                $("#url").parents(".layui-form-item").hide();
                $("#perms").parents(".layui-form-item").hide();
                $("#icon").parents(".layui-form-item").show();
                $("input[name='visible']").parents(".layui-form-item").show();
            } else if (menuType == 2) {
                $("#url").parents(".layui-form-item").show();
                $("#perms").parents(".layui-form-item").show();
                $("#icon").parents(".layui-form-item").show();
                $("input[name='visible']").parents(".form-group").show();
            } else if (menuType == 3) {
                $("#url").parents(".layui-form-item").hide();
                $("#perms").parents(".layui-form-item").show();
                $("#icon").parents(".layui-form-item").hide();
                $("input[name='visible']").parents(".layui-form-item").hide();
            }
        });

        $('#treeName').click(function () {
            var treeId = $("#treeId").val();
            var menuId = treeId > 0 ? treeId : 1;
            var url = "/system/menu/selectMenuTree/" + menuId;
            var options = {
                title: '菜单选择',
                width: "380",
                url: url,
                callBack: function (index, layero){
                    var body = layer.getChildFrame('body', index);
                    $("#treeId").val(body.find('#treeId').val());
                    $("#treeName").val(body.find('#treeName').val());
                    layer.close(index);
                }
            };
            $.modal.openOptions(options);
        })

        $('#icon').click(function () {
            var url = "/system/menu/icon";
            var options = {
                title: '菜单选择',
                url: url,
                callBack: function(index, layero){
                    console.log("yessss")
                }
            };
            $.modal.openOptions(options);
        })


        //监听提交
        form.on('submit(form)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    </script>
</body>
</html>
